<template>
  <cfDialog :dialogObj='dialogObj'>
    <div slot='content' v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="参数名称" prop="configName">
          <el-input v-model="form.configName" placeholder="请输入参数名称" />
        </el-form-item>
        <el-form-item label="参数键名" prop="configKey">
          <el-input v-model="form.configKey" placeholder="请输入参数键名" />
        </el-form-item>
        <el-form-item label="参数键值" prop="configValue">
          <el-input v-model="form.configValue" placeholder="请输入参数键值" />
        </el-form-item>
        <el-form-item label="系统内置" prop="configType">
          <el-radio-group v-model="form.configType">
            <el-radio
              v-for="dict in sysYesNo"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备 注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </div>
    <template slot='footer'>
      <el-button type='primary' v-if="!loading" size='small' @click='handleConfirm'>确定</el-button>
    </template>
  </cfDialog>
</template>
<script>
import { getConfig, addConfig, updateConfig } from "@/api/system/config";
export default {
  props: {
    dialogObj: {
      type: Object,
      default: ({
        visible: false,
        type: '',
        id: '',
        title: '',
        width: '520px'
      })
    }
  },
  data() {
    return {
      form: {},
      rules: { /**表单校验 */
        configName: [
          { required: true, message: "参数名称不能为空", trigger: "blur" }
        ],
        configKey: [
          { required: true, message: "参数键名不能为空", trigger: "blur" }
        ],
        configValue: [
          { required: true, message: "参数键值不能为空", trigger: "blur" }
        ]
      },
      loading: false
    }
  },
  created() {
    this.getSysYesNo();
    if(this.dialogObj.id) {
      this.getDetailFn()
    } else {
      this.form = {
        configId: undefined,
        configName: undefined,
        configKey: undefined,
        configValue: undefined,
        configType: "Y",
        remark: undefined
      }
    }
  },
  methods: {
    /**确定按钮提交功能*/
    handleConfirm() {
      this.submitForm('form', async () => {
        let res;
        if (this.dialogObj.id) {
          res = await updateConfig(this.form)
        } else {
          res = await addConfig(this.form)
        }
        if(res.code == 200) {
          this.$message.success('操作成功');
          this.dialogObj.visible = false;
          this.$emit('refresh');
        }
        setTimeout(() => {
          this.loading = false;
        }, 500);
      })
    },
    /**获取弹窗详情*/
    async getDetailFn() {
      this.loading = true;
      const res = await getConfig(this.dialogObj.id);
      if(res.code == 200) {
        this.form = res.data;
      }
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
}
</script>